<template>
  <div>
    <index-nav></index-nav>
    <button v-on:click="login">登录</button>
    <span>{{info}}</span>
    <br><br>
    <div v-for="currency in info" v-bind:key="currency.code" class="currency">
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>
        {{ currency.rate_float | currencydecimal }}
      </span>
    </div>
    <index-footer></index-footer>
  </div>
</template>

<script>
import NavMenu from "@/components/NavMenu.vue";
import Footer from "@/components/MainFooter.vue";
import axios from "axios";

export default {
  data: function() {
    return {
      info: ""
    };
  },
  components: {
    "index-nav": NavMenu,
    "index-footer": Footer
  },
  methods: {
    login: function() {
      axios
        .get("https://api.coindesk.com/v1/bpi/currentprice.json")
        .then(response => (this.info = response.data.bpi));
    }
  },
  filters: {
    currencydecimal(value) {
      return value.toFixed(2);
    }
  }
};
</script>

<style>
</style>
